const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/i,//正则表达式
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              /*
                css-loader 6.0.0以上版本,对引入背景图片的url解析方式不一样，导致生成了两个图片（一个正常由file-loader解析生成，一个仅由css-loader解析引入）
                可以将css-loader版本降低到5
                将es解析关闭
              */
              esModule: false
            }
          },
          {
            loader: 'postcss-loader',
            // options: {
            //   postcssOptions: {
            //     plugins: [
            //       // require('autoprefixer'),
            //       // require('postcss-preset-env')
            //       'postcss-preset-env'
            //     ]
            //   }
            // }
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          'postcss-loader',
          'less-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        // use: 'file-loader'
        use: [
          {
            // loader: 'file-loader',
            // 比file-loader多了base64和url转化功能
            loader: 'url-loader',
            options: {
              /* 
              ext 文件扩展名
              name 文件名
              hash 使用md4生成的hash值
              hash:<length> 截取hash
              */
              name: "[name].[hash:6].[ext]",
              outputPath: 'img',
              limit: 100 * 1024
            }
          }
        ]
      }
    ]
  }
}